<template>
	<div class="personnelAdd personnelList roleMain">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">
				<i class="lh lh-sys fw_100"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>任务列表</el-breadcrumb-item>
			<el-breadcrumb-item>任务详情</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15 pl_10 pr_10">
			<div>
				<h4 class="border-bottom pb_10">任务详情</h4>
			</div>
			<div class="mt_10 wrap_grid-content mt_20">
				<el-row>
					<el-col :span="9">
						<!-- 第一列 -->
						<div class="grid-content bg-purple">
							<div class="contentInfo">
								<el-steps align-center class="mb_20" :active="active" finish-status="success">
									<el-step :title="item.node_name" v-for="(item, index) in rl_info.log" :key="index">
										<template slot="description">
											<div class="step-row">
												<h4 class="steps">{{ item.user }}</h4>
												<h4 class="steps">{{ item.date }}</h4>
												<h4 class="steps">{{ item.time }}</h4>
											</div>
										</template>
									</el-step>
								</el-steps>
								<div class="row-info clear">
									<div class="fl title-key">订单编号：</div>
									<div class="fl list-cont pointer u text-primary">{{ rl_info.sn }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">岗位：</div>
									<div class="fl list-cont">{{ rl_info.label_name }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">行业类型：</div>
									<div class="fl list-cont">
										{{ rl_info.industry_name }}
									</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">店铺名称：</div>
									<div class="fl list-cont pointer u text-primary">{{ rl_info.shop_name }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">用工开始日期：</div>
									<div class="fl list-cont">{{ rl_info.start_date }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">用工天数：</div>
									<div class="fl list-cont">{{ rl_info.period }}天</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">用工时间：</div>
									<div class="fl list-cont">
										{{ rl_info.start_time | ReversalTime }}-{{
											(Number(rl_info.start_time) + Number(rl_info.hours)) | ReversalTime
										}}
									</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">计划用工时长：</div>
									<div class="fl list-cont">{{ rl_info.hours }}小时</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">需求人数：</div>
									<div class="fl list-cont">{{ rl_info.person_num }}人</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">商户单价：</div>
									<div class="fl list-cont">{{ rl_info.price_b }}元/小时</div>
								</div>

								<div class="row-info clear">
									<div class="fl title-key">订单金额：</div>
									<div class="fl list-cont">{{ rl_info.order_total }} 元</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">支付状态：</div>
									<div class="fl list-cont">{{ rl_info.pay_status_name }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">支付方式：</div>
									<div class="fl list-cont">{{ rl_info.pay_way }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">支付金额：</div>
									<div class="fl list-cont">{{ '' + rl_info.pay_money_to }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">退款金额：</div>
									<div class="fl list-cont">{{ rl_info.refund_money }}元</div>
								</div>

								<div class="row-info clear">
									<div class="fl title-key">预计费用：</div>
									<!-- <div class="fl list-cont">{{ rl_info.total | filterNumber }}元</div> -->
									<div class="fl list-cont">{{ rl_info.total }}元</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">备注：</div>
									<div class="fl list-cont mt_5" v-if="rl_info.remark == ''">无</div>
									<div class="fl list-cont mt_5" v-if="rl_info.remark != ''">{{ rl_info.remark }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">商圈：</div>
									<div class="fl list-cont">{{ rl_info.area_name }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">工作地址：</div>
									<div class="fl list-cont">{{ rl_info.address }}</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="15" v-if="recordsList.length != 0">
						<div class="grid-content bg-purple">
							<!-- 历史调账记录 -->
							<el-table :data="recordsList" style="width: 100%;">
								<el-table-column prop="adjust_type" label="调账对象" align="center">
									<template slot-scope="{ row }">
										<span class="text-success" v-if="row.adjust_type == 'staff'">人才</span>
										<span class="text-info" v-if="row.adjust_type == 'shop'">店铺</span>
									</template>
								</el-table-column>
								<el-table-column prop="adjust_hours" label="调整时长" align="center">
									<template slot-scope="{ row }">
										<span>{{ row.adjust_hours }}h</span>
									</template>
								</el-table-column>
								<el-table-column prop="amount_other" label="其他金额" align="center"> </el-table-column>
								<el-table-column prop="adjust_amount" label="合计金额" align="center"> </el-table-column>
								<el-table-column prop="remark" label="备注" align="center"> </el-table-column>
								<el-table-column prop="status" label="状态" width="80" align="center">
									<template slot-scope="{ row }">
										<span class="text-light" v-if="row.status == 10">未入账单</span>
										<span class="text-primary" v-if="row.status == 20">已入账单</span>
										<span class="text-danger" v-if="row.status == 30">已作废</span>
										<span class="text-info" v-if="row.status == 40 && row.adjust_type == 'shop'">待支付</span>
										<span class="text-success" v-if="row.status == 50 && row.adjust_type == 'shop'">已支付</span>
										<span class="text-info" v-if="row.status == 40 && row.adjust_type == 'staff'">待提现</span>
										<span class="text-success" v-if="row.status == 50 && row.adjust_type == 'staff'">已提现</span>
										<span class="text-danger" v-if="row.status == 60">已退款</span>
									</template>
								</el-table-column>
								<el-table-column prop="adder" label="创建人" align="center"> </el-table-column>
								<el-table-column prop="add_time" label="创建时间" align="center" width="160"> </el-table-column>
							</el-table>
						</div>
					</el-col>
					<el-col :span="9">
						<!-- 第二列 -->
						<div class="grid-content bg-purple-light">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">任务状态：</div>
									<div class="fl list-cont pointer text-primary">{{ task_info.status_name }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">岗位：</div>
									<div class="fl list-cont pointer text-primary" style="min-width: 150px;">
										<span>{{ task_info.job_name }}</span>
										<span v-if="task_info.job_level">({{ task_info.job_level | level2CN }})</span>
									</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">接单人：</div>
									<div class="fl list-cont pointer text-primary" style="min-width: 150px;">
										<span>{{ task_info.staff_name || '暂无' }}</span>
										<span v-if="task_info.staff_name && task_info.staff_job_level"
											>({{ task_info.staff_job_level | level2CN }})</span
										>
									</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">接单人电话：</div>
									<div class="fl list-cont pointer text-primary">{{ task_info.mobile || '暂无' }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">计划时长：</div>
									<div class="fl list-cont pointer text-primary">{{ task_info.hour_expect }}h</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">任务金额：</div>
									<div class="fl list-cont pointer text-primary">
										{{ (task_info.task_money / 100) | filterNumber }}元
									</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">支付状态：</div>
									<div class="fl list-cont pointer text-primary">{{ task_info.pay_status }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">实际时长：</div>
									<div class="fl list-cont pointer text-primary">{{ task_info.hour_actual }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">店铺结算金额：</div>
									<div class="fl list-cont pointer text-primary" v-if="task_info.shop_settlement_amount">
										{{ moneyUnitCent2Coin(task_info.shop_settlement_amount) }}元
									</div>
								</div>

								<div class="row-info clear">
									<div class="fl title-key">店铺单价：</div>
									<div class="fl list-cont pointer text-primary" style="width: 65%;">
										<span v-if="task_info.amout_shop >= 0">{{ task_info.amout_shop }}元/小时</span>
										<span v-if="task_info.unitPrice_shop_msg">({{ task_info.unitPrice_shop_msg }})</span>
									</div>
								</div>

								<div class="row-info clear">
									<div class="fl title-key">人才结算金额：</div>
									<div class="fl list-cont pointer text-primary" v-if="task_info.staff_settlement_amount">
										{{ moneyUnitCent2Coin(task_info.staff_settlement_amount) }}元
									</div>
								</div>

								<div class="row-info clear">
									<div class="fl title-key">人才单价：</div>
									<div class="fl list-cont pointer text-primary" style="width: 65%;">
										<span v-if="task_info.amout_staff >= 0">{{ task_info.amout_staff }}元/小时</span>
										<span v-if="task_info.unitPrice_staff_msg">({{ task_info.unitPrice_staff_msg }})</span>
									</div>
								</div>

								<div class="row-info clear">
									<div class="fl title-key">任务备注：</div>
									<div class="fl list-cont pointer text-primary" style="width: 70%;">
										{{ task_info.task_description }}
									</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">人才备注：</div>
									<div class="fl list-cont pointer text-primary" style="width: 70%;">
										{{ task_info.staff_remark }}
									</div>
								</div>
								<!-- <div class="row-info clear">
                                    <div class="fl title-key">取消原因：</div>
                                    <div
                                        class="fl list-cont pointer text-primary"
                                    >{{task_info.hour_expect}}</div>
                                </div>-->
								<div class="row-info clear">
									<div class="fl title-key">异常状态：</div>
									<div class="fl list-cont pointer text-danger" v-for="item in task_info.abnormal_name" :key="item.id">
										{{ item }}
									</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">发票状态：</div>
									<div class="fl list-cont pointer text-danger">
										{{ task_info.invoice_status_name }}
									</div>
								</div>

								<div class="row-info clear">
									<div class="fl title-key">分配时间：</div>
									<div class="fl list-cont">{{ task_info.assigning_time }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">确认时间：</div>
									<div class="fl list-cont">{{ task_info.accept_time }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">签到时间：</div>
									<div class="fl list-cont">{{ task_info.checkin_time }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">完成时间：</div>
									<div class="fl list-cont">{{ task_info.finish_time }}</div>
								</div>
								<div class="row-info clear mb_20">
									<div class="fl title-key">延时完成时间：</div>
									<div class="fl list-cont">{{ task_info.hour_delay }}</div>
								</div>
								<div
									class="row-info clear list_info"
									v-for="item in task_info.log"
									:key="item.id"
									v-if="item.subject_type != 'settlement'"
								>
									<div class="fl title-key">{{ item.user_name }}</div>
									<div class="fl title-key" style="width: 150px;">{{ item.add_time }}</div>
									<div class="fl title-key" style="width: 250px; text-align: left;">（{{ item.title }}）</div>
									<div class="fl title-key" style="width: 250px; text-align: left;" v-if="item.responsibility">
										责任方：{{ item.responsibility }}
										<span style="padding: 0 2px;">{{ item.reason_type }}</span>
										<span style="padding: 0 2px;">{{ item.reason_title }}</span>
										<span style="padding: 0 2px;">{{ item.remark }}</span>
									</div>
									<div class="title-key signWq" v-if="item.data.check_type == 2">
										外勤打卡
									</div>
									<div class="demo-image__preview" v-if="item.data.img">
										<el-image
											style="width: 40px; height: 40px;"
											:src="head_url + item.data.img"
											:preview-src-list="[head_url + item.data.img]"
										>
										</el-image>
									</div>
									<div class="title-key" v-if="item.data.location" style="width: 250px; text-align: left;">
										<span>{{ item.data.location }}（{{ item.data.distance }}）{{ item.data.remark }}</span>
									</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<!-- 第三列 -->
						<div class="grid-content bg-purple">
							<el-table
								ref="singleTable"
								:data="tableData"
								highlight-current-row
								@current-change="handleCurrentChange"
								height="660px"
								style="width: 42%; cursor: pointer;"
								class="first fl"
							>
								<el-table-column property="date" label="任务日期" width="120"></el-table-column>
							</el-table>
							<el-table
								ref="singleTable2"
								:data="tableData2"
								highlight-current-row
								@current-change="handleCurrentChange2"
								height="660px"
								style="width: 58%; cursor: pointer;"
								class="two fl"
							>
								<el-table-column property="task_sn" label="任务编号" width="180"></el-table-column>
							</el-table>
						</div>
					</el-col>
				</el-row>
			</div>
			<div class="ml_110 mt_80">
				<!-- <span class="resetBtn mr_10" @click="back">返回</span> -->
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { fetchIndustryJob } from '@/api/label.js'
export default {
	name: 'Main',
	data() {
		return {
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			active: 0, //进度条位置
			url: common.url,
			head_url: common.head_url,
			rl_id: '', //需求id
			rl_sn: '', //需求sn
			task_id: '', //任务id
			task_sn: '', //任务sn
			rl_info: {}, //订单详情
			task_info: {}, //任务详情
			tableData: [],
			tableData2: [],
			recordsList: [], //历史调账记录
			currentRow1: '',
			currentRow2: '',
			index: 0
		}
	},
	created() {
		this.rl_id = this.$route.query.rl_id //需求id
		this.rl_sn = this.$route.query.rl_sn //需求sn
		this.task_id = this.$route.query.task_id //任务id
		this.task_sn = this.$route.query.task_sn //任务sn
		this.start_date = this.$route.query.start_date //时间
		this.demandinfo()
	},
	computed: {
		currentRow() {
			const { currentRow1, currentRow2, task_id, task_sn } = this
			return {
				currentRow1,
				currentRow2,
				task_id,
				task_sn
			}
		}
	},
	watch: {
		currentRow(val) {
			console.log('val', val)
			//任意值改变的时候，查询对应的任务详情
			this.taskinfo()
		}
	},
	mounted() {
		this.$refs.singleTable.setCurrentRow(this.tableData[0])
	},
	methods: {
		demandinfo() {
			let fn = new FormData()
			if (this.rl_id != undefined && this.rl_id != '') {
				fn.append('id', this.rl_id)
			} else {
				fn.append('sn', this.rl_sn)
			}
			this.$http.post(this.url + '/demand/info', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (+res.data.data.pay_money.toString().indexOf('/') == -1) {
							res.data.data.pay_money_to = [res.data.data.pay_money + '元']
						} else {
							var arr = res.data.data.pay_money.split('/')
							res.data.data.pay_money_to = arr.splice(0, arr.length - 1)
						}

						this.rl_info = res.data.data
						this.getIndustryJob(this.rl_info.city_id, this.rl_info.industry)

						//进度条的位置
						res.data.data.log.forEach(item => {
							if (item.is_show == 1) {
								this.active += 1
							}
						})

						// 对用工天数进行循环
						for (let index = 0; index < res.data.data.period; index++) {
							if (index == 0) {
								this.tableData.push({
									date: res.data.data.start_date
								})
							} else {
								var nextday = this.addDate(res.data.data.start_date, index)
								this.tableData.push({ date: nextday })
							}
						}
						//根据任务id获取找到对应有任务编号的位置，默认选中
						var now_id = 0
						for (let index = 0; index < this.tableData.length; index++) {
							if (this.start_date == this.tableData[index].date) {
								break
							} else {
								now_id += 1
							}
						}
						this.$refs.singleTable.setCurrentRow(this.tableData[now_id])
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		async getIndustryJob(cityId, industry) {
			try {
				let ret = await fetchIndustryJob({
					city_id: cityId
				})
				if (ret.length > 0) {
					this.rl_info.industry_name = ret.filter(x => x.id == +industry)[0].label_name || ''
				}
			} catch (err) {
				console.log(err)
			}
		},
		lookPhoto(item) {
			console.log(item.data.img)
			this.maxPhotoShow = true
		},
		taskinfo() {
			let fn = new FormData()
			if (this.task_id != undefined && this.task_id != '') {
				fn.append('id', this.task_id)
			} else {
				fn.append('sn', this.task_sn)
			}
			this.$http.post(this.url + '/task/info', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						res.data.data.amout_shop = (res.data.data.amout_shop / 100).toFixed(2)
						res.data.data.amout_staff = (res.data.data.amout_staff / 100).toFixed(2)
						this.task_info = res.data.data
						this.task_info.log.forEach(it => {
							if (it.data.distance) {
								it.data.distance = it.data.distance > 1000 ? it.data.distance / 1000 + 'km' : it.data.distance + '米'
							}
						})
						// if (res.data.data.staff_name == '') {
						// 	this.task_info.staff_name = '暂无'
						// }
						//
						// if (res.data.data.mobile == '') {
						// 	this.task_info.mobile = '暂无'
						// }

						//获取历史调账记录
						this.getAdjustmentList()
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res && res.data && res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		getAdjustmentList() {
			let fn = new FormData()
			fn.append('task_sn', this.task_sn)
			this.$http.post(this.url + '/billChange/getList', fn).then(
				res => {
					if (res.data.msg == '查询成功！' || res.data.code == '200') {
						if (res.data.data) {
							this.recordsList = res.data.data.list
						} else {
							this.recordsList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		addDate(date, days) {
			var d = new Date(date)
			d.setDate(d.getDate() + days)
			var m = d.getMonth() + 1
			var dd = d.getDate()
			if (m < 10) {
				m = '0' + m
			}
			if (dd < 10) {
				dd = '0' + dd
			}
			return d.getFullYear() + '-' + m + '-' + dd
		},
		back() {
			//返回
			this.$router.go(-1)
		},
		handleCurrentChange(val) {
			this.currentRow1 = val.date
			// // 查询对应的编号列表
			this.listShop(val.date)
		},
		handleCurrentChange2(val) {
			// console.log("????");

			// console.log(val);
			// console.log("????");

			this.currentRow2 = val.task_sn
			this.task_id = val.id
			this.task_sn = val.task_sn
		},
		listShop(e) {
			//获取任务列表
			let fn = new FormData()
			fn.append('source', 'info')
			fn.append('time_type', 2)
			fn.append('demand_sn', this.rl_sn)
			fn.append('start_time', this.currentRow1)
			this.$http.post(this.url + '/task/list', fn).then(
				res => {
					console.log(res.data.data)
					if (res.data.msg == '查询成功！' || res.data.code == '200') {
						if (res.data.data != null) {
							this.tableData2 = res.data.data.list
							console.log(e)
							if (this.index == 0) {
								var now_id = 0
								for (let index = 0; index < this.tableData2.length; index++) {
									if (this.task_id == this.tableData2[index].id || this.task_sn == this.tableData2[index].task_sn) {
										break
									} else {
										now_id += 1
									}
								}
								this.$refs.singleTable2.setCurrentRow(this.tableData2[now_id])
							} else {
								this.$refs.singleTable2.setCurrentRow(this.tableData2[0])
							}
							if (e == this.start_date) {
								this.index += 1
							}
						} else {
							this.tableData2 = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		}
	},
	filters: {
		ReversalTime: function (value) {
			value = value % 24
			return common.getReversalTime(value)
		}
	}
}
</script>

<style scoped>
.wrap_grid-content {
	border: 1px solid #ebebeb;
}
.grid-content {
	padding: 10px 15px 30px;
}
.bg-purple-light {
	min-height: 470px;
	border-right: 1px solid #ebebeb;
	border-left: 1px solid #ebebeb;
}
.row-info .title-key {
	width: 95px;
}
.area {
	background: #f7f7f7;
	border-radius: 8px;
	padding: 0 10px;
	width: 300px;
	min-height: 200px;
}
.row-info .list-cont {
	margin-left: 10px;
}

.steps {
	color: #888888;
}

.list_info {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20px;
	border-bottom: 1px dashed #ebebeb;
}
.list_info:last-child {
	border-bottom: none;
}
.row-info .title-key {
	text-align: left;
}
.signWq {
	width: 110px !important;
}
</style>



// WEBPACK FOOTER //
// src/components/roledemand/Mainrw.vue